<div id="app">
</div>
<style>
    .ml-4 {
        margin-left: 10px;
    }
</style>
<script src="https://unpkg.com/vue@3.2.1"></script>
<script>
    const {
        h,
        createApp
    } = Vue;
    const Stack = {
        render() {
            const slot = this.$slots.default ?
                this.$slots.default() :
                [];
            return h('div', {
                class: `stack`
            }, slot.map(child => {
                return h('div', {
                    class: `ml-${this.$attrs.size}`
                }, [child])
            }));
        }
    }
    let App = {
        components: {
            Stack
        },
        template: `
        <Stack size="4">
            <div>hello</div>
            <div>hello</div>
            <Stack size="4">
                <div>hello</div>
                <div>hello</div>
            </Stack>
        </Stack>`
    }
    createApp(App).mount("#app")
</script>